<script setup lang='ts'>
import { PureTableBar } from "@/components/RePureTableBar";
import ScreenConformity from "@/components/Screen-Conformity/index.vue";
import { usePDataIntegration } from "./hooks/PDataIntegration";
const {
  btnload,
  columns,
  loading,
  Visible,
  dataList,
  MySignIn,
  pagination,
  CustomerGroup,
  RefCustomerGroup,
  RefScreenConformity,
  SelectCustomerBase,
  SelectDataById,
  HideVisible,
  getCustomerGroup,
  handleSizeChange,
  handleCurrentChange
} = usePDataIntegration()
</script>

<template>
  <div class="main">
    <div class="main_top">
      <el-form-item label="选择客户群">
        <el-select v-model="MySignIn" placeholder="选择客户群" @change="SelectDataById">
          <el-option label="所有客户" value="all" />
          <el-option v-for="item in SelectCustomerBase" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-scrollbar height="calc(100% - 45px)">
        <ScreenConformity ref="RefScreenConformity" />
      </el-scrollbar>
    </div>
    <div class="main_bottom">
      <PureTableBar title="" class="list_hei">
        <template v-slot="{ size, checkList }">
          <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" :loading="loading" size="small"
            :data="dataList" :columns="columns" :checkList="checkList" :pagination="pagination" max-height="300"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" :header-cell-style="{
              background: 'var(--el-table-row-hover-bg-color)',
              color: 'var(--el-text-color-primary)'
            }">
          </pure-table>
        </template>
      </PureTableBar>
    </div>
    <ReDialog :width="350" :height="150" :models="Visible" @Closes="HideVisible(RefCustomerGroup)">
      <template #header>
      </template>
      <template #main>
        <el-form ref="RefCustomerGroup" :model="CustomerGroup" label-width="120px" :inline="true">
          <el-form-item label="客户群名称" prop="name" :rules="[
            {
              required: true,
              message: '请输入客户群名称',
              trigger: 'blur',
            }, {
              min: 4,
              max: 15,
              message: '客户群名称长度在4-15个字符',
              trigger: 'change',
            }]">
            <el-input v-model.trim="CustomerGroup.name" />
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <el-button type="primary" @click="getCustomerGroup(RefCustomerGroup)" :loading="btnload">确定</el-button>
        <el-button @click="HideVisible(RefCustomerGroup)"> 取消 </el-button>
      </template>
    </ReDialog>
  </div>
</template>

<style scoped lang="scss">
@import url(@/style/CreditComm.scss);

.main_top {
  height: 49.5%;
  padding: 10px;
  border: 1px solid #dcdfe6;
}

.main_bottom {
  top: 1%;
  height: 49.5%;
  position: relative;
  border: 1px solid #dcdfe6;
}

:deep(.el-dialog__footer) {
  text-align: center;
}

:deep(.list_hei) {
  .flex {
    display: none;
  }
}

.pure-table {
  height: calc(100% - 10px);
}

:deep(.list_hei.p-2) {
  padding: 0;
}

:deep(.list_hei.mt-6) {
  margin: 0;
}

@media screen and (max-width:1600px) {
  :deep(.el-table--fit) {
    height: 78%;
  }
}
</style>
